<template>
  <div class="side-container">
<!--    <div class="original-logo">original favor</div>-->
    <!--    <logo v-if="showLogo" :collapse="isCollapse"/>-->
    <el-menu class="el-menu-vertical-demo" default-active="1-4-1" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse" router
             background-color="#20222A"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="/">
        <i class="icon-5 iconfont" style="padding: 0 5px;font-size: 20px;color: rgba(255,255,255,.8);"></i>
        <span slot="title">original Favor</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">主页</span>
        </template>
        <el-menu-item index="/home/dashboard">dashboard</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">应用</span>
        </template>
        <el-menu-item index="/home/applications/clipboard">剪切板</el-menu-item>
        <el-menu-item index="/home/applications/wangEditor">富文本编辑器</el-menu-item>
        <el-menu-item index="/home/applications/sortable">拖拽</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">页面</span>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">测试</span>
        </template>
        <el-menu-item index="/home/test">test</el-menu-item>
        <el-menu-item index="/home/test1">test1</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import submenu from './submenu'
//todo  样式
// import variables from '@/styles/variables.scss'

export default {
  name: 'sideBar',
  components: { submenu, Logo },
  computed: {
    // ...mapGetters([
    //   'sidebar'
    // ]),
    routes() {
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.showsSidebarLogo
    },
    // variables() {
    //   return variables
    // },
    isCollapse() {
      return this.$store.state.modules.sidebar.opened
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style lang="scss">
  .side-container {
    width: 100%;
    border: 1px solid #eee;
    .original-logo {
      background-color: #20222A;
      color: rgba(255,255,255,.8);
      box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
      line-height: 50px;
      font-size: 16px;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1002;
      width: 220px;
      height: 49px;
      padding: 0 15px;
      box-sizing: border-box;
      overflow: hidden;
      font-weight: 300;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .el-menu-vertical-demo {
      min-height: calc(100vh - 6px);
    }
    /*这个一定要加*/
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 210px;
      min-height: calc(100vh - 6px);
    }
    .el-header {
      padding: 0;
    }
    .el-aside {
      height: 100vh;
      color: #333;
    }
    .page-enter-active,
    .page-leave-active {
      transition: opacity 0.5s;
    }
    .page-enter,
    .page-leave-active {
      opacity: 0;
    }
  }
</style>
